<template>
  <section class="m-menu" @mouseenter="showMenuContainer" @mouseleave="hideMenuContainer">
    <div class="menu-trigger" :class="{ active: showMenuContaner }" >
      <i class="fa fa-list" aria-hidden="true"></i>
      <span class="text">菜单</span>
    </div>
    <transition name="m-fade-left">
      <section class="menu-container" v-show="showMenuContaner">
        <div class="menu-lv1 item-comm-styl" v-for="(itemLv1) in list" :key="itemLv1.id" @mouseenter="mouseenterLv1(itemLv1)">
          {{itemLv1.menuTitle}}
          <i class="right-arrows fa fa-angle-right" v-if="itemLv1.children && itemLv1.children.length > 0"></i>
        </div>
      </section>
    </transition>
    <transition name="m-fade-left">
      <div class="menu-container-lv2" v-show="showMenuContaner && showMenuContanerLv2" @mouseenter="mouseenterMenuLv2Container">
        <div class="menu-lv2" v-for="(itemLv2) in listLv2" :key="itemLv2.id">
          <template v-if="itemLv2.dt">
            <div class="item-comm-styl lv2-dt">
              {{itemLv2.dt}}
            </div>
            <div class="item-comm-styl" v-for="itemLv2Dd in itemLv2.dd" :key="itemLv2Dd.id" @mouseenter="mouseenterLv2(itemLv2Dd)">
              {{itemLv2Dd.menuTitle}}
              <i class="right-arrows fa fa-angle-right" v-if="itemLv2Dd.children && itemLv2Dd.children.length > 0"></i>
            </div>
          </template>
          <template v-else >
            <div class="item-comm-styl" @mouseenter="mouseenterLv2(itemLv2)">
              {{itemLv2.menuTitle}}
              <i class="right-arrows fa fa-angle-right" v-if="itemLv2.children && itemLv2.children.length > 0"></i>
            </div>
          </template>
        </div>
      </div>
    </transition>
    <transition name="m-fade-left">
      <div class="menu-container-lv3" v-show="showMenuContaner && showMenuContanerLv2 && showMenuContanerLv3" @mouseenter="mouseenterMenuLv3Container">
        <div v-for="(itemLv3) in listLv3" :key="itemLv3.id">
          <template v-if="itemLv3.dt">
            <div class="item-comm-styl lv2-dt">
              {{itemLv3.dt}}
            </div>
            <div class="item-comm-styl" v-for="itemLv3Dd in itemLv3.dd" :key="itemLv3Dd.id">
              {{itemLv3Dd.menuTitle}}
            </div>
          </template>
          <template v-else >
            <div class="item-comm-styl">
              {{itemLv3.menuTitle}}
            </div>
          </template>
        </div>
      </div>
    </transition>
  </section>
</template>

<script>
export default {
  name: '',
  props: {},
  data () {
    return {
      showMenuContaner: false,
      showMenuContanerLv2: false,
      showMenuContanerLv3: false,
      menuLv1HoverTimer: undefined,
      menuLv2HoverTimer: undefined,
      list: [
        {
          menuTitle: '腾讯云计算',
          id: '1',
          children: [
            {
              id: '2',
              menuTitle: '腾讯云计算'
            },
            {
              dt: '关于',
              id: '3',
              dd: [
                {
                  id: '4',
                  menuTitle: '关于我们'
                },
                {
                  id: '5',
                  menuTitle: '客户案例'
                },
                {
                  id: '6',
                  menuTitle: '全球基础设施'
                },
                {
                  id: '7',
                  menuTitle: '联系我们'
                }
              ]
            },
            {
              dt: '入门',
              id: '9',
              dd: [
                {
                  id: '10',
                  menuTitle: '免费套餐'
                },
                {
                  id: '11',
                  menuTitle: '入门中心'
                }
              ]
            },
            {
              dt: '动态',
              id: '12',
              dd: [
                {
                  id: '13',
                  menuTitle: '产品发布台'
                },
                {
                  id: '14',
                  menuTitle: '媒体报道'
                }
              ]
            }
          ]
        },
        {
          id: '15',
          menuTitle: '产品',
          children: [
            {
              id: '16',
              menuTitle: '产品'
            },
            {
              id: '17',
              menuTitle: '热门'
            },
            {
              id: '18',
              menuTitle: '基础'
            },
            {
              id: '19',
              menuTitle: '安全'
            },
            {
              id: '20',
              menuTitle: '大数据'
            },
            {
              id: '21',
              menuTitle: '人工智能'
            },
            {
              id: '22',
              menuTitle: '企业应用'
            },
            {
              id: '23',
              menuTitle: '行业应用'
            },
            {
              id: '24',
              menuTitle: '开发者服务'
            }
          ]
        },
        {
          id: '25',
          menuTitle: '解决方案',
          children: [
            {
              id: '26',
              dt: '解决方案',
              dd: [
                {
                  id: '27',
                  menuTitle: '通用解决方案'
                },
                {
                  id: '28',
                  menuTitle: '行业解决方案'
                },
                {
                  id: '29',
                  menuTitle: '云智大数据与AI'
                },
                {
                  id: '30',
                  menuTitle: '微信解决方案'
                },
                {
                  id: '31',
                  menuTitle: '教育解决方案'
                },
                {
                  id: '32',
                  menuTitle: '安全与运维'
                }
              ]
            }
          ]
        },
        {
          id: '33',
          menuTitle: '定价',
          children: [
            {
              id: '331',
              dt: '定价',
              dd: [
                {
                  id: '3311',
                  menuTitle: '产品定价'
                },
                {
                  id: '3312',
                  menuTitle: '价格计算器'
                }
              ]
            }
          ]
        },
        {
          id: '34',
          menuTitle: '文档',
          children: [
            {
              id: '341',
              menuTitle: '计算',
              children: [
                {
                  id: '3411',
                  dt: '计算',
                  dd: [
                    {
                      id: '3412',
                      menuTitle: '云服务器'
                    },
                    {
                      id: '3413',
                      menuTitle: 'GPU云服务器'
                    },
                    {
                      id: '3414',
                      menuTitle: 'FPGA云服务器'
                    },
                    {
                      id: '3415',
                      menuTitle: '专用宿主机'
                    }
                  ]
                }
              ]
            },
            {
              id: '342',
              menuTitle: '存储',
              children: [
                {
                  id: '3411',
                  dt: '存储',
                  dd: [
                    {
                      id: '3512',
                      menuTitle: '对象存储'
                    },
                    {
                      id: '3513',
                      menuTitle: '文件存储'
                    },
                    {
                      id: '3514',
                      menuTitle: '归档存储'
                    },
                    {
                      id: '3515',
                      menuTitle: '存储网关'
                    }
                  ]
                }
              ]
            },
            {
              id: '343',
              menuTitle: '云数据库'
            },
            {
              id: '344',
              menuTitle: '网络'
            },
            {
              id: '345',
              menuTitle: 'CDN与加速'
            },
            {
              id: '346',
              menuTitle: '互联网中间件'
            },
            {
              id: '347',
              menuTitle: '域名与网站'
            },
            {
              id: '348',
              menuTitle: '安全'
            },
            {
              id: '349',
              menuTitle: '视频服务'
            },
            {
              id: '350',
              menuTitle: '云智大数据平台服务'
            },
            {
              id: '351',
              menuTitle: '云智大数据可视化'
            },
            {
              id: '352',
              menuTitle: '云智大数据应用服务'
            },
            {
              id: '353',
              menuTitle: '云智AI应用服务'
            },
            {
              id: '354',
              menuTitle: '云智AI平台服务'
            },
            {
              id: '355',
              menuTitle: '金融服务'
            }
          ]
        },
        {
          id: '35',
          menuTitle: '支持'
        },
        {
          id: '36',
          menuTitle: '合作与生态'
        },
        {
          id: '37',
          menuTitle: '云市场'
        },
        {
          id: '38',
          menuTitle: '云+社区'
        },
        {
          id: '39',
          menuTitle: '云学院'
        }
      ],
      listLv2: undefined,
      listLv3: undefined
    }
  },
  methods: {
    toggleMenuContainer () {
      this.showMenuContaner = !this.showMenuContaner
    },
    showMenuContainer () {
      this.showMenuContaner = true
    },
    hideMenuContainer () {
      if (this.menuLv1HoverTimer) clearTimeout(this.menuLv1HoverTimer)
      if (this.menuLv2HoverTimer) clearTimeout(this.menuLv2HoverTimer)
      let initTime = 200
      if (this.showMenuContanerLv3) {
        this.showMenuContanerLv3 = false
        initTime += 200
      }
      if (this.showMenuContanerLv2) {
        setTimeout(() => {
          this.showMenuContanerLv2 = false
        }, initTime)
        initTime += 200
      }
      setTimeout(() => {
        this.showMenuContaner = false
        this.showMenuContanerLv2 = false
        this.showMenuContanerLv3 = false
      }, initTime)
    },

    mouseenterLv1 (hoverItem) {
      if (this.menuLv1HoverTimer) clearTimeout(this.menuLv1HoverTimer)
      this.menuLv1HoverTimer = setTimeout(() => {
        this.menuLv1Hover(hoverItem)
      }, 200)
    },
    menuLv1Hover (hoverItem) {
      if (hoverItem && hoverItem.children && hoverItem.children.length > 0) {
        this.listLv2 = hoverItem.children
        if (!this.showMenuContanerLv2) this.showMenuContanerLv2 = true
      } else {
        this.showMenuContanerLv2 = false
      }
    },
    mouseenterLv2 (hoverItem) {
      if (this.menuLv2HoverTimer) clearTimeout(this.menuLv2HoverTimer)
      this.menuLv2HoverTimer = setTimeout(() => {
        this.menuLv2Hover(hoverItem)
      }, 200)
    },
    menuLv2Hover (hoverItem) {
      if (hoverItem && hoverItem.children && hoverItem.children.length > 0) {
        this.listLv3 = hoverItem.children
        if (!this.showMenuContanerLv3) this.showMenuContanerLv3 = true
      } else {
        this.showMenuContanerLv3 = false
      }
    },
    mouseenterMenuLv2Container () {
      if (this.menuLv1HoverTimer) clearTimeout(this.menuLv1HoverTimer)
    },
    mouseenterMenuLv3Container () {
      if (this.menuLv2HoverTimer) clearTimeout(this.menuLv2HoverTimer)
    }
  },
  mounted () {
    // console.log(encodeURI('行业解决方案'))
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/css/val-global.scss";
@import "~@/assets/css/mixin.scss";

.m-menu {
  display: inline-block;
  .menu-trigger {
    position: relative;
    padding: 0 16px;
    line-height: 40px;
    cursor: pointer;
    .fa {
      vertical-align: middle;
    }
    .text {
      margin-left: 6px;
      font-size: 12px;
      vertical-align: middle;
    }
    &:hover {
      color: #00A4FF;
    }
    &.active {
      color: #00A4FF;
    }
    &:after {
      display: block;
      position: absolute;
      content: ' ';
      height: 12px;
      width: 1px;
      border-right: 1px solid #666;
      top: 50%;
      right: 0;
      margin-top:-6px;
    }
  }
  .item-comm-styl {
    position: relative;
    padding-left: 20px;
    line-height: 2.5;
    color: #333;
    font-size: 12px;
    cursor: pointer;
    &:hover {
      color: #00A4FF;
    }
    .right-arrows {
      position: absolute;
      right: 10px;
      top: 50%;
      line-height: 1;
      // transform: translateY(-50%);
      margin-top:-8px;
      font-size: 16px;
    }
  }
  .menu-container {
    position: fixed;
    box-sizing: border-box;
    z-index: 9999;
    padding: 12px 0;
    width: 160px;
    color: $color-black;
    left: 0;
    top: 40px;
    bottom: 0px;
    background-color: $background-gray;
    box-shadow: 2px 0 0 #EEE;
    overflow: auto;
    @include m-scroll-styl;
    .menu-lv1 {
      &:first-child {
        background:  #00A4FF;
        color: #fff;
      }
    }
  }
  .menu-container-lv2 {
    @include m-scroll-styl;
    position: fixed;
    z-index: 9998;
    width: 160px;
    top: 40px;
    left: 160px;
    bottom: 0;
    background: $background-gray;
    padding-top: 10px;
    color: #333;
    box-shadow: 2px 0 0 #EEE;
    overflow: auto;
    .lv2-dt {
      position: relative;
      color: #AAA;
      cursor: default ;
      &:after {
        content: ' ';
        display: block;
        position: absolute;
        width: 120px;
        left: 20px;
        bottom: 1px;
        height: 1px;
        border-bottom: 1px solid #ccc;
      }
    }
  }
  .menu-container-lv3 {
    @include m-scroll-styl;
    position: fixed;
    z-index: 9997;
    width: 160px;
    top: 40px;
    left: 320px;
    bottom: 0;
    background: $background-gray;
    padding-top: 10px;
    color: #333;
    box-shadow: 2px 0 0 #EEE;
    overflow: auto;
  }
}
</style>
